<template>
  <div class="new_big_class">
    <header-go-back 
      :title="getNewClassTitle" 
      text="保存" 
      @back="handleGoBack" 
      @ok="handleOk"
    ></header-go-back>
    <div class="big_class_title">{{ classSub ?  '一级分类：' + route.query.name : '正在编辑一级分类'}}</div>
    <div class="new_list_item">
      <div class="list_title">分类名称</div>
      <input 
        type="text" 
        class="item_input" 
        :class="{ 'invalid_input': valid.input }" 
        placeholder="输入类别名称" 
        v-model="className"
      >
      <div class="input_invalid"></div>
    </div>
    <div class="new_list_item">
      <div class="list_title">分类图标</div>
      <div class="list_icon" :class="{ 'invalid_input': valid.icon }">
        <div class="icon_kong">
          <span v-if="!classIcon">空</span>
          <i :class="['iconfont', classIcon]"></i>
        </div>
      </div>
    </div>
    <div class="new_icon_body">
      <icon-display @clickIcon="handleClickIcon" ></icon-display>
    </div>
  </div>
</template>

<script lang="ts">
import { createClass } from '@/api/class'
import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import HeaderGoBack from '@/components/common/HeaderGoBack.vue'
import IconDisplay from '@/components/icon/IconDisplay.vue'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
  name: 'NewClass',
  components: {
    HeaderGoBack,
    IconDisplay
},
  setup() {
    const store = useStore()
    const route = useRoute()
    const router = useRouter()
    const bookId = computed(() => store.state.book.id)
    const getNewClassTitle = computed(() => {
      if(isEdit.value) {
        if(classSub.value) {
          return '编辑小类'
        } else {
          return '编辑大类'
        }
      } else {
        if(classSub.value) {
          return '新建小类'
        } else {
          return '新建大类'
        }
      }
    })
    const classSub = ref(false)
    const isEdit = ref(false)
    const valid = reactive({
      input: false,
      icon: false
    })
    const className = ref('')
    const classIcon = ref('')
    const formData = ref({
      icon: '',
      name: '',
      bookId: '',
      type: ''
    })
    const subFormData = ref({
      name: '',
      fromId: -1,
      icon: '',
      bookId: '',
      type: ''
    })
    const handleClickIcon = (icon: string) => {
      classIcon.value = icon
    }
    const handleGoBack = () => {
      router.push('/editClass')
    }
    const handleCreateBigClass = () => {
      const data = classSub.value ? subFormData.value : formData.value
      data.bookId = bookId.value
      data.icon = classIcon.value
      data.name = className.value
      createClass(data).then((res) => {
        if(typeof res.code === 'number' && res.code === 100) {
          alert('新建成功')
          store.dispatch('fetchClassList')
        }
      })
    }
    const handleOk = () => {
      valid.icon = !classIcon.value ? true : false
      valid.input = !className.value ? true : false
      if(!valid.icon && !valid.input) {
        handleCreateBigClass()
        handleGoBack()
      }
    }
    onMounted(() => {
      if(route.query.sub) {
        classSub.value = Boolean(Number(route.query.sub))
      }
      if(route.query.type) {
        classSub.value  ? subFormData.value.type = route.query.type as string : formData.value.type = route.query.type as string
      }
      if(route.query.fromId) {
        subFormData.value.fromId = Number(route.query.fromId)
      }
      if(route.query.isEdit) {
        isEdit.value = Boolean(route.query.isEdit)
      }
      if(route.query.id) {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const data = store.state.classList.filter((item: any) => {
          return item.id === Number(route.query.id)
        })[0]
        className.value = data.name
        classIcon.value = data.icon
      }
    })
    return {
      valid,
      classSub,
      className,
      classIcon,
      route,
      isEdit,
      getNewClassTitle,
      handleGoBack,
      handleOk,
      handleClickIcon
    }
  }
})
</script>

<style scoped>
  .new_big_class {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    height: 100vh;
    z-index: 10;
  }
  .new_list_item {
    text-align: start;
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
  }
  .list_title {
    display: inline-block;
  }
  .item_input {
    border: none;
    padding-left: 30px;
  }
  .list_icon {
    float: right;
  }
  .icon_kong {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: #F9C3C2;
    text-align: center;
    line-height: 40px;
    font-size: 24px;
    color: #fff;
  }
  .invalid_input {
    border-bottom: 2px solid #F9C3C2;
  }
  .new_icon_body {
    padding: 0 20px;
    height: calc(100% - 217px);
    overflow-y: auto;
    background-color: rgba(249,195,194, 0.2);
  }
  .big_class_title {
    padding: 10px 20px;
    font-size: 12px;
    color: #ccc;
    height: 15px;
    text-align: left;
  }
</style>